<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"> <!-- 设置字符编码为 UTF-8 -->
  <title>2*num+1 计算</title> <!-- 页面标题 -->
</head>
<body>
  <!-- 输入框，用户输入数字 -->
  <input id="numInput" placeholder="输入数字" />
  <!-- 按钮，点击发送请求 -->
  <button id="calcBtn">计算</button>
  <!-- 显示结果区域 -->
  <div id="result"></div>

  <script>
    // 获取元素引用
    const input = document.getElementById('numInput');
    const btn = document.getElementById('calcBtn');
    const result = document.getElementById('result');

    // 按钮点击事件
    btn.onclick = () => {
      // 拼接并发送 GET 请求
      fetch('/api/calc?num=' + encodeURIComponent(input.value))
        .then(res => res.json())      // 解析 JSON
        .then(data => {
          // 显示计算结果或错误
          if (data.error) {
            result.textContent = data.error;
          } else {
            result.textContent = '输入: ' + data.input + '，结果: ' + data.result;
          }
        })
        .catch(err => {
          // 捕获网络或解析错误
          result.textContent = '请求失败';
        });
    };
  </script>
</body>
</html>
